<template>
  <div class="bgc" v-if="allSongMsg.playlist&&allSongMsg.playlist&&allSongMsg.playlist.coverImgUrl">
    <div class="iconfont icon" @click="toIndex">&#xeb0a;</div>
    <div class="logoBox" :style="{backgroundImage:`url(${allSongMsg.playlist.coverImgUrl})`}">

      <!-- 小图片 -->
      <div class="picBox" :style="{backgroundImage:`url(${allSongMsg.playlist.coverImgUrl})`}">
        <div class="title">歌单</div>
        <div class="clickCount">{{allSongMsg.playlist.playCount|palyCount}}</div>
      </div>
      <div class="des">{{allSongMsg.playlist.name}}
        <div class="creatorImg">
          <img :src="allSongMsg.playlist.creator.avatarUrl" alt=""><span>{{allSongMsg.playlist.creator.nickname}}</span>
        </div>
      </div>
    </div>
    <div class="ad">歌曲列表</div>
    <div class="ad_box">
      <div class="songListBox" v-for="(item,index) in songList" :key="index" @click="jumpSongs(item.id)">
        <MusicList :musicList='item'>
          <span class="indexs" style="color:#c0c8d6" :class="{higRed:index<3}">{{index+1|indexs}}</span>
        </MusicList>
      </div>
    </div>
    <!-- 
    精彩评论
    <div class="ad">精彩评论</div>
    <div class="commentBox">
      <div v-for="(item,index) in hotCommentList" :key="index">
        <Comments :commentList="item"></Comments>
      </div>
    </div> -->

    <!-- 评论 -->
    <Comments :commentList="newCommentList"></Comments>

  </div>

</template>

<script>
import MusicList from '@/components/MusicList.vue';
import Comments from '@/components/Comments.vue';
export default {
  components: {
    MusicList,
    Comments
  },
  created() {
    this.getSongList();
    this.getNewComment();
    this.getHotComment();
  },
  data() {
    return {
      songList: [],
      allSongMsg: [],
      newNewList: [],
      newCommentList: []
      // hotCommentList: []
    };
  },

  methods: {
    //精彩评论
    async getHotComment() {
      const {
        data: { hotComments: res }
      } = await this.$http.get(`comment/hot?id=${this.$route.query.ids}&type=2`);
      // console.log('>>>>>>>>>精彩评论', res);
      this.hotCommentList = res;
    },
    //最新评论
    async getNewComment() {
      const { data: res } = await this.$http.get(`comment/playlist?id=${this.$route.query.ids}`);
      this.newCommentList = res;
    },
    async getSongList() {
      const { data: res } = await this.$http.get(`playlist/detail?id=${this.$route.query.ids}`);
      // console.log('>>>>>>>>>', res);
      this.allSongMsg = res;

      this.newAllList = res.playlist.tracks.map((val, index) => {
        val.picUrl = val.al.picUrl;
        val.song = {
          alias: [res.playlist.description],
          id: val.id,
          name: val.name,
          artists: [{ name: val.ar['0'].name }],
          //[{ name: val.ar.reduce((total, val) => total + `${val.name} `) }]
          privilege: {
            maxbr: res.privileges[index].maxbr
          }
        };
        return val;
      });
      this.songList = res.playlist.tracks.map((va, index) => {
        let val = { ...va };
        val.song = {
          id: val.id,
          name: val.name,
          artists: [{ name: val.ar[0].name }],
          album: { name: val.name },
          // val.ar.reduce((total, val) => total + `${val.name} `),
          privilege: {
            maxbr: res.privileges[index].maxbr
          }
        };
        return val;
      });
    },
    jumpSongs(ids) {
      let currentSongIndex = this.newAllList.findIndex(val => {
        return val.id == ids;
      });
      let currentObj = { currentSongIndex: currentSongIndex, newAllList: this.newAllList };
      //显示播放器
      this.$store.commit('showPlayBox', true);
      this.$store.commit('setSongsObject', currentObj);
    },
    toIndex() {
      this.$router.go(-1);
    }
  },
  filters: {
    palyCount(value) {
      if (value / 10000 > 10) {
        return (value / 10000).toFixed(1) + '万';
      }
      return value;
    },
    indexs(value) {
      return value < 10 ? '0' + value : value;
    }
  }
};
</script>

<style lang="less" scoped>
.ad_box {
  height: 603px;
  overflow: auto;
}
.creatorImg {
  margin-top: 10px;
  width: 100%;
  img {
    width: 30px;
    border-radius: 15px;
  }
  .autor {
    width: 300px;
  }
  span {
    margin-left: 10px;
    color: #b6a388;
    width: 88px;
    height: 24px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.icon {
  width: 50px;
  height: 50px;
  font-size: 30px;
  color: rgb(231, 223, 223);
  position: absolute;
  top: 0;
  left: 0;
}
.des {
  color: #eeeff0;
  width: 150px;
  margin-left: 50px;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
}
.ad {
  font-size: 14px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.clickCount {
  position: absolute;
  top: 0px;
  right: 0;
  color: white;
  font-size: 12px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  &::before {
    content: '';
    background-image: url();
    background-repeat: no-repeat;
    position: absolute;
    width: 12px;
    height: 12px;
    left: -14px;
    top: 0px;
  }
}
.songListBox {
  background-color: white;
}
.bgc {
  position: relative;
  background-color: #eeeff0;
  padding-bottom: 75px;
}
.indexs {
  padding: 0 10px;
  padding-top: 10px;
}
.higRed {
  color: red !important;
}
.logoBox {
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  height: 200px;
  width: 100%;
  background-position: center;
  .picBox {
    margin-left: 20px;
    position: relative;
    border: 1px solid transparent;
    width: 135px;
    height: 135px;
    background-size: contain;
    background-repeat: no-repeat;
    .title {
      margin-top: 10px;
      width: 40px;
      padding: 3px;
      font-size: 12px;
      text-align: center;
      background-color: red;
      color: white;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
  }
}
</style>